vue
<template>
  <view class="container">
    <view class="card">
      <view class="title">发布回答</view> <!-- 发布回答的标题 -->
      <view class="default-title">标题: {{ title }}</view> <!-- 显示默认标题 -->
      <view class="default-content">内容: {{ content }}</view> <!-- 显示默认内容 -->
      <textarea v-model="student_content" placeholder="请输入回答（至少100字）" class="textarea" /> <!-- 学生回答输入框 -->
      <button @click="submitAnswer">提交回答</button> <!-- 提交按钮 -->
      <view v-if="errorMessage" class="error">{{ errorMessage }}</view> <!-- 显示错误信息 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "这是默认标题", // 默认标题
      content: "这是默认内容，可以根据需要修改。", // 默认内容
      student_content: "", // 学生回答，默认空
      errorMessage: "", // 错误信息，默认空
    };
  },
  methods: {
    submitAnswer() {
      this.errorMessage = ""; // 清空错误信息
      // 检查回答是否非空且不少于100字
      if (!this.student_content) {
        this.errorMessage = "回答不能为空。"; // 如果回答为空，设置错误信息
      } else if (this.student_content.length < 100) {
        this.errorMessage = "回答必须不少于100字。"; // 如果回答少于100字，设置错误信息
      } else {
        // 提交回答的逻辑
        // uni.showToast({
        //   title: '回答提交成功', // 提交成功的提示
        //   icon: 'success'
        // });
        // 这里可以添加提交到服务器的逻辑
		uni.navigateTo({
		  url: `/pages/success/success?title=${this.title}&content=${this.content}&student_content=${this.student_content}`
		});
      }
    }
  }
};
</script>

<style>
.container {
  padding: 20px; /* 容器内边距 */
}
.card {
  border: 1px solid #ccc; /* 卡片边框 */
  padding: 15px; /* 卡片内边距 */
  border-radius: 5px; /* 卡片圆角 */
}
.default-title, .default-content {
  margin-top: 10px; /* 上边距 */
  font-size: 18px; /* 默认内容字体大小 */
  color: #333; /* 默认内容字体颜色 */
}
.textarea {
  width: 100%; /* 文本区域宽度100% */
  height: 300px; /* 增加文本区域的高度 */
  margin-top: 10px; /* 上边距 */
  padding: 10px; /* 内边距 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 5px; /* 圆角 */
  resize: none; /* 禁止手动调整大小 */
}
button {
  margin-top: 10px; /* 上边距 */
  background-color: #007AFF; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  padding: 10px; /* 按钮内边距 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 按钮圆角 */
}
.error {
  color: red; /* 错误信息的颜色 */
  margin-top: 10px; /* 上边距 */
}
</style>